<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import { VxeFormPropTypes, VxeModalInstance, VxeFormProps } from "vxe-pc-ui";
import {
  taxSourcesList,
  earlyWarnRiskType,
  earlyWarnAdd,
  earlyWarnEdit
} from "@/api/warning/warning";
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();
import { ElMessage } from "element-plus";

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const showAddModal = (id: number) => {
  showModal(`新增预警类型`);
  nextTick(() => {
    formRef.value.clearValidate();
    // emits("reload");
  });
};
const showEditModal = (record: Recordable) => {
  showModal(`修改预警类型`);
  nextTick(() => {
    formRef.value.clearValidate();
    for (let key in formOptions.data) {
      if (record[key] === undefined || record[key] === null) {
      } else {
        formOptions.data[key] = record[key];
      }
    }
  });
};
onBeforeMount(() => {
  gettax();
  getrisk();
});
// 税源地列表
const taxList = ref<any[]>();
const gettax = () => {
  taxSourcesList({ taxSourcesState: 1 }).then((res: any) => {
    taxList.value = res?.data?.rows;
  });
};
// 风险类型列表
const riskList = ref<any[]>();
const getrisk = () => {
  earlyWarnRiskType().then((res: any) => {
    riskList.value = res?.data;
  });
};
// 处理方式列表
const wayOptions = ref<any[]>([
  {
    label: "发放需审核",
    value: 1
  },
  {
    label: "仅风险预警",
    value: 2
  }
]);
// 处理频率列表
const FrequencyOptions = ref<any[]>([
  {
    label: "每次提交发放",
    value: 1
  },
  {
    label: "次月月初",
    value: 2
  }
]);

const formRef = ref();
interface FormDataVO {
  taxSourcesIdList: string | number; //税源地
  riskType: string | number; //风险类型
  handleWay: string | number; //处理方式
  handleFrequency: string | number; //处理频率
  riskReasons: string; //风险原因
  remark: string; //备注
  triggerRule: string | number; //触发规则
  singleAmount: number | string; //单人单笔金额
  totalAmountBatch: number | string; //当批次总笔数
  singlePaymentAmountStart: number | string; //单笔发放金额1
  singlePaymentAmountEnd: number | string; //单笔发放金额2
  proportionTotal: number | string; //占比总数
  dispersion: number | string; //离散度
  singleYearAmount: number | string; //单人每年金额
  singleContinuousMonth: number | string; //单人连续月份
  waveAmountStart: number | string; //累计发放金额波动范围 1
  waveAmountEnd: number | string; //累计发放金额波动范围 2
  waveAmount: number | string; //累计发放金额 总数
  issuingAge: number | string; // 发放人员年龄
  id: number | string;
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    taxSourcesIdList: "",
    riskType: "",
    handleWay: "",
    handleFrequency: "",
    riskReasons: "",
    remark: "",
    triggerRule: "",
    singleAmount: "",
    totalAmountBatch: "",
    singlePaymentAmountStart: "",
    singlePaymentAmountEnd: "",
    proportionTotal: "",
    dispersion: "",
    singleYearAmount: "",
    singleContinuousMonth: "",
    waveAmountStart: "",
    waveAmountEnd: "",
    waveAmount: "",
    issuingAge: "",
    id: ""
  },
  items: [
    {
      field: "taxSourcesIdList",
      title: "关联税源地",
      span: 24,
      itemRender: {},
      slots: { default: "taxSourcesIdList" }
    },
    {
      field: "riskType",
      title: "风险类型",
      span: 24,
      itemRender: {},
      slots: { default: "riskType" }
    },
    {
      field: "triggerRule",
      title: "触发规则",
      span: 24,
      itemRender: {},
      slots: { default: "triggerRule" },
      visibleMethod: ({ data }) => {
        if (data.riskType) {
          return true;
        } else {
          return false;
        }
      }
    },
    {
      field: "handleFrequency",
      title: "处理频率",
      span: 24,
      itemRender: {},
      slots: { default: "handleFrequency" }
    },
    {
      field: "handleWay",
      title: "处理方式",
      span: 24,
      itemRender: {},
      slots: { default: "handleWay" }
    },
    {
      field: "riskReasons",
      title: "风险原因",
      span: 24,
      itemRender: {},
      slots: { default: "riskReasons" }
    },
    {
      field: "remark",
      title: "备注",
      span: 24,
      itemRender: {},
      slots: { default: "remark" }
    }
  ]
});

const formRules = ref<VxeFormPropTypes.Rules>({
  taxSourcesIdList: [
    { required: true, message: "请选择税源地", trigger: "change" }
  ],
  riskType: [{ required: true, message: "请选择风险类型", trigger: "change" }],
  handleFrequency: [
    { required: true, message: "请选择风处理频率", trigger: "change" }
  ],
  handleWay: [{ required: true, message: "请选择处理方式", trigger: "change" }],
  triggerRule: [
    { required: true, message: "请选择触发规则", trigger: "change" }
  ]
});
const handleSubmit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) {
    if (formOptions.data.id) {
      earlyWarnEdit(formOptions.data).then(res => {
        formRef.value.clearValidate();
        modalOptions.modalValue = false;
        emits("reload");
      });
    } else {
      earlyWarnAdd(formOptions.data).then(res => {
        formRef.value.clearValidate();
        modalOptions.modalValue = false;
        emits("reload");
      });
    }
  }
};
// 风险类型选择
const riskSelect = (res: any) => {
  formOptions.data.triggerRule = res;
  formOptions.data.riskReasons = "费用金额存在风险";
};
// 频率选择
const FrequencyChange = (res: any) => {
  if (res == 2) {
    formOptions.data.handleWay = 2;
  }
};
defineExpose({ showAddModal, showEditModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="600"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :titleWidth="120"
        :titleAlign="`right`"
        :rules="formRules"
        v-bind="formOptions"
      >
        <template #taxSourcesIdList="{ data }">
          <el-select
            clearable
            placeholder="请选择税源地"
            v-model="data.taxSourcesIdList"
            multiple
            collapse-tags
          >
            <el-option
              v-for="(item, index) in taxList"
              :key="index"
              :label="item.taxSourcesName"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template #riskType="{ data }">
          <el-select
            clearable
            placeholder="请选择风险类型"
            v-model="data.riskType"
            @change="riskSelect"
          >
            <el-option
              v-for="(item, index) in riskList"
              :key="index"
              :label="item.desc"
              :value="item.code"
            ></el-option>
          </el-select>
        </template>
        <template #triggerRule="{ data }">
          <div
            v-if="data.riskType == 1"
            class="flex justify-start items-center"
          >
            <div>单人单笔金额 >=</div>
            <div style="flex: 1">
              <el-input
                prop="singleAmount"
                v-model="data.singleAmount"
                placeholder="20000"
                ><template #append>元</template></el-input
              >
            </div>
          </div>
          <div v-if="data.riskType == 2">
            <div class="flex justify-start items-center mb-3">
              <div>当批次总笔数 >=</div>
              <div style="flex: 1">
                <el-input
                  prop="totalAmountBatch"
                  v-model="data.totalAmountBatch"
                  placeholder="20"
                  ><template #append>笔</template></el-input
                >
              </div>
            </div>
            <div class="flex justify-start items-center mb-3">
              <div style="flex: 1">
                <el-input
                  prop="singlePaymentAmountStart"
                  v-model="data.singlePaymentAmountStart"
                  placeholder="0"
                  ><template #append>元</template></el-input
                >
              </div>
              <div><=单笔发放金额<=</div>
              <div style="flex: 1">
                <el-input
                  prop="singlePaymentAmountEnd"
                  v-model="data.singlePaymentAmountEnd"
                  placeholder="200"
                  ><template #append>元</template></el-input
                >
              </div>
            </div>
            <div class="flex justify-start items-center">
              <div>占比总数>=</div>
              <div style="flex: 1">
                <el-input
                  prop="proportionTotal"
                  v-model="data.proportionTotal"
                  placeholder="20"
                  ><template #append>%</template></el-input
                >
              </div>
            </div>
          </div>
          <div v-if="data.riskType == 3">
            <div class="flex justify-start items-center">
              <div>离散度 <=</div>
              <div style="flex: 1">
                <el-input
                  prop="dispersion"
                  v-model="data.dispersion"
                  placeholder="20"
                  ><template #append>%</template></el-input
                >
              </div>
            </div>
          </div>
          <div
            v-if="data.riskType == 4"
            class="flex justify-start items-center"
          >
            <div>单人每年金额 >=</div>
            <div style="flex: 1">
              <el-input
                prop="singleYearAmount"
                v-model="data.singleYearAmount"
                placeholder="20"
                ><template #append>元</template></el-input
              >
            </div>
          </div>
          <div v-if="data.riskType == 5">
            <div class="flex justify-start items-center mb-3">
              <div>单人连续</div>
              <div style="flex: 1">
                <el-input
                  prop="singleContinuousMonth"
                  v-model="data.singleContinuousMonth"
                  placeholder="20"
                  ><template #append>月</template></el-input
                >
              </div>
            </div>
            <div class="flex justify-start items-center mb-3">
              <div>累计发放金额波动范围</div>
              <div style="flex: 1">
                <el-input
                  prop="waveAmountStart"
                  v-model="data.waveAmountStart"
                  placeholder="0"
                  ><template #append>元</template></el-input
                >
              </div>
              <div>~</div>
              <div style="flex: 1">
                <el-input
                  prop="waveAmountEnd"
                  v-model="data.waveAmountEnd"
                  placeholder="20000"
                  ><template #append>元</template></el-input
                >
              </div>
            </div>
            <div class="flex justify-start items-center">
              <div>且累计发放金额>=</div>
              <div style="flex: 1">
                <el-input
                  prop="waveAmount"
                  v-model="data.waveAmount"
                  placeholder="20"
                  ><template #append>元</template></el-input
                >
              </div>
            </div>
          </div>
          <div
            v-if="data.riskType == 6"
            class="flex justify-start items-center"
          >
            <div>企业信息异常（经营异常、行政处罚、违法欠税等）</div>
          </div>
          <div
            v-if="data.riskType == 7"
            class="flex justify-start items-center"
          >
            <div>发放人员年龄 >=</div>
            <div style="flex: 1">
              <el-input
                prop="issuingAge"
                v-model="data.issuingAge"
                placeholder="60"
                ><template #append>岁</template></el-input
              >
            </div>
          </div>
          <div
            v-if="data.riskType == 8"
            class="flex justify-start items-center"
          >
            <div>发放人员姓名中企业高管名单</div>
          </div>
        </template>
        <template #handleFrequency="{ data }">
          <el-radio-group
            v-model="data.handleFrequency"
            @change="FrequencyChange"
          >
            <el-radio
              v-for="(item, index) in FrequencyOptions"
              :key="index"
              :value="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </template>
        <template #handleWay="{ data }">
          <el-radio-group v-model="data.handleWay">
            <el-radio
              v-for="(item, index) in wayOptions"
              :key="index"
              :value="item.value"
              :disabled="index == 0 && data.handleFrequency == 2 ? true : false"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </template>
        <template #riskReasons="{ data }">
          <el-input
            v-model="data.riskReasons"
            placeholder="当发放需审核时在商户端展示"
          />
        </template>
        <template #remark="{ data }">
          <el-input
            v-model="data.remark"
            type="textarea"
            placeholder="请输入备注"
          />
        </template>
      </vxe-form>
    </template>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template>
  </vxe-modal>
</template>
